import {
  Popconfirm,
  Space,
  TableColumnsType,
  Tag,
  Tooltip,
  Typography,
  Badge,
  InputNumber,
  DatePicker,
  Table,
  Image,
  Select,
  Empty,
  Button,
} from 'antd'
import { NavigateFunction } from 'react-router-dom'
import type {
  BillInfoVO,
  ITableData,
  ITableDataArriavl,
  PurchaseOrderCommodityVO,
  PurchaseProduceQtyVO,
  ProductSimpleVO,
  PurchaseProduceScheduleVO,
  PurchaseFabricOrderVO,
  PurchaseFabricBaseVO,
} from './types'
import { BadgeColorMap } from '@/constant'
import {
  CONTRACT_STATUS_TEXT,
  FIRST_ORDER_RETURN_ORDER_TEXT,
  ORDER_ACCOUNTING_STATUS_TEXT,
  ORDER_STATUS_TEXT,
  PURCHASEWAY_TEXT,
} from '@/constant/purchase'
import { IOptionClassEdit } from './index'
import { CheckOutlined, CloseOutlined, EditOutlined, DeleteOutlined, ThunderboltOutlined } from '@ant-design/icons'
import dayjs from 'dayjs'
import * as mathjs from 'mathjs'
import { calculateRowSpans, getDateIsLate } from '@/utils/util'
import { getImageByUrl } from '@/utils/getImageByUrl'
export const useIndexColumns = ({
  navigate,
  onBillClick,
  isRoot,
  canEdit,
  onEditDeliveryTime,
  tableData,
  settableData,
  UserOptions,
  setUserOptions,
  handleSearchUser,
  onSaveUser,
  EditTrackOrderPerson,
}: {
  navigate: NavigateFunction
  onBillClick: (info: ITableData) => void
  onEditDeliveryTime: (info: ITableData) => void
  isRoot: boolean
  canEdit: boolean
  EditTrackOrderPerson: boolean
  tableData: ITableData[]
  settableData: React.Dispatch<React.SetStateAction<ITableData[]>>
  UserOptions: IOptionItem[]
  setUserOptions: React.Dispatch<React.SetStateAction<IOptionItem[]>>
  handleSearchUser: (newValue: string) => void
  onSaveUser: (info: ITableData, isFlush: boolean) => void
}): TableColumnsType<ITableData> => [
  {
    title: '采购订单号',
    dataIndex: 'purchaseOrderCode',
    key: 'purchaseOrderCode',
    align: 'center',
    fixed: 'left',
    width: 200,
    render: (info, rows) => {
      return info ? (
        <Tooltip
          placement="top"
          color="#fff"
          overlayInnerStyle={{ width: 'max-content' }}
          title={
            <div className="small_sise_customtable">
              <Table
                bordered
                pagination={false}
                rowHoverable={false}
                rowClassName={(_, index) => {
                  return index % 2 === 0 ? '' : 'zebra-row-odd'
                }}
                rowKey="id"
                dataSource={rows?.purchaseOrderCommodityList || []}
                columns={[
                  {
                    title: '款式编码',
                    dataIndex: 'spuCode',
                    key: 'spuCode',
                    align: 'center',
                    width: 150,
                    render: (info) => (info ? info : '-'),
                  },
                  {
                    title: '助记码',
                    dataIndex: 'memoryCode',
                    key: 'memoryCode',
                    align: 'center',
                    width: 150,
                    render: (info) => (info ? info : '-'),
                  },
                  {
                    title: '款式名称',
                    dataIndex: 'productName',
                    key: 'productName',
                    align: 'center',
                    width: 150,
                    render: (info) => (info ? info : '-'),
                  },
                ]}
              ></Table>
            </div>
          }
        >
          <Typography.Link onClick={() => navigate('/purchase/order/detail?id=' + rows.id)}>{info}</Typography.Link>
        </Tooltip>
      ) : (
        '-'
      )
    },
  },
  {
    title: '正式订单时间',
    dataIndex: 'officialOrderTime',
    key: 'officialOrderTime',
    align: 'center',
    width: 140,
    render: (info) => {
      return info ? info : '-'
    },
  },
  {
    title: '供应商',
    dataIndex: 'supplierName',
    key: 'supplierName',
    align: 'center',
    width: 200,
    ellipsis: {
      showTitle: false,
    },
    render: (info) => {
      return info ? (
        <Tooltip placement="top" title={info}>
          {info}
        </Tooltip>
      ) : (
        '-'
      )
    },
  },
  {
    title: '供应链跟单',
    dataIndex: 'trackOrderPerson',
    key: 'trackOrderPerson',
    align: 'center',
    width: 180,
    render: (info, rows) => {
      return (
        <div>
          {!rows?.isEdit ? (
            <div>
              <span>{rows.trackOrderPerson || '-'}</span>
              {rows?.status != 3 && rows?.status != 4 && rows?.status != 5 && EditTrackOrderPerson && (
                <Tooltip placement="top" title="编辑">
                  <EditOutlined
                    style={{ color: 'var(--primary-color)', cursor: 'pointer', marginLeft: 4 }}
                    onClick={() => {
                      rows.isEdit = true
                      if (rows.trackOrderPerson && rows.trackOrderPersonWorkId) {
                        setUserOptions([{ label: rows.trackOrderPerson, value: rows.trackOrderPersonWorkId }])
                      }
                      settableData([...tableData])
                    }}
                  />
                </Tooltip>
              )}
            </div>
          ) : (
            <Space.Compact size="small">
              <Select
                value={rows.trackOrderPersonWorkId || null}
                placeholder="请选择"
                style={{ width: 90 }}
                options={UserOptions}
                popupMatchSelectWidth={false}
                showSearch
                allowClear
                onClear={() => {
                  rows.trackOrderPerson = null
                  rows.trackOrderPersonWorkId = null
                  settableData([...tableData])
                }}
                optionFilterProp="label"
                filterOption={false}
                onSearch={handleSearchUser}
                onChange={(_, items: any) => {
                  rows.trackOrderPersonWorkId = items?.workId || null
                  rows.trackOrderPerson = items?.name || null
                  settableData([...tableData])
                }}
                notFoundContent={<Empty description="请输入内容搜索" image={Empty.PRESENTED_IMAGE_SIMPLE} />}
              ></Select>
              <Button
                type="primary"
                icon={<CheckOutlined />}
                onClick={() => {
                  onSaveUser(rows, true)
                }}
              ></Button>
              <Button
                icon={<CloseOutlined />}
                onClick={() => {
                  rows.isEdit = false
                  settableData([...tableData])
                  onSaveUser(rows, false)
                }}
              ></Button>
            </Space.Compact>
          )}
        </div>
      )
    },
  },
  {
    title: 'QC人员',
    dataIndex: 'qcDefaultUserName',
    key: 'qcDefaultUserName',
    align: 'center',
    width: 120,
    render: (info) => info || '-',
  },
  {
    title: '订单状态',
    dataIndex: 'status',
    key: 'status',
    align: 'center',
    width: 160,
    render: (info) => {
      return <Badge color={BadgeColorMap[info]} text={ORDER_STATUS_TEXT[info] || '-'} />
    },
  },
  {
    title: '推送状态',
    dataIndex: 'pushStatus',
    key: 'pushStatus',
    align: 'center',
    width: 150,
    hidden: !isRoot,
    render: (info, row) => {
      return info == 0 ? (
        <Tooltip placement="top" title={row?.pushErrorMsg || '暂无异常信息'}>
          <Tag color="error">推送CB失败</Tag>
        </Tooltip>
      ) : (
        '-'
      )
    },
  },
  {
    title: '异常标签',
    dataIndex: 'tagInfo',
    key: 'tagInfo',
    align: 'center',
    width: 150,
    render: (info) => {
      return info && info.length > 0
        ? info?.map((item: any) => {
            return (
              <Tooltip key={item.tagId} placement="top" title={item?.remark}>
                <Tag color="warning">{item?.tagId == 1 ? '订单驳回' : item?.tagId == 2 ? 'OTB额度不足' : '未配置'}</Tag>
              </Tooltip>
            )
          })
        : '-'
    },
  },
  {
    title: '采购方式',
    dataIndex: 'purchaseType',
    key: 'purchaseType',
    align: 'center',
    width: 120,
    render: (info) => {
      return PURCHASEWAY_TEXT[info] || '-'
    },
  },
  {
    title: '首单/返单',
    dataIndex: 'orderType',
    key: 'orderType',
    align: 'center',
    width: 120,
    render: (info) => {
      return FIRST_ORDER_RETURN_ORDER_TEXT[info] || '-'
    },
  },
  {
    title: '大类',
    dataIndex: 'firstClassConfigName',
    key: 'firstClassConfigName',
    align: 'center',
    width: 100,
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '年份',
    dataIndex: 'year',
    key: 'year',
    align: 'center',
    width: 100,
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '季节',
    dataIndex: 'seasonCode',
    key: 'seasonCode',
    align: 'center',
    width: 120,
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '要求到货时间',
    dataIndex: 'requiredArrivalTime',
    key: 'requiredArrivalTime',
    align: 'center',
    width: 150,
    hidden: !isRoot,
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '供应链交期',
    dataIndex: 'deliveryTime',
    key: 'deliveryTime',
    align: 'center',
    width: 150,
    render: (info, rows) => {
      if ([0, 1, 2].includes(rows.status!) && rows?.contractStatus != 5 && isRoot && canEdit) {
        return (
          <div className="edit_intable_style" onClick={() => onEditDeliveryTime(rows)}>
            <Typography.Link>{info || '-'}</Typography.Link>
          </div>
        )
      } else {
        return <Typography.Text>{info || '-'}</Typography.Text>
      }
    },
  },
  {
    title: '订单合同',
    dataIndex: 'contractStatus',
    key: 'contractStatus',
    align: 'center',
    width: 150,
    render: (info) => {
      return CONTRACT_STATUS_TEXT[info] || '-'
    },
  },
  {
    title: '下单总数',
    dataIndex: 'totalQty',
    key: 'totalQty',
    align: 'center',
    width: 150,
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '已预约发货总数',
    dataIndex: 'totalScheduledQty',
    key: 'totalScheduledQty',
    align: 'center',
    width: 150,
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '在途总数',
    dataIndex: 'totalOnTheWayQty',
    key: 'totalOnTheWayQty',
    align: 'center',
    width: 150,
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '总吊牌额',
    dataIndex: 'totalTagAmount',
    key: 'totalTagAmount',
    align: 'center',
    width: 150,
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '订单账期',
    dataIndex: 'billStatus',
    key: 'billStatus',
    align: 'center',
    width: 150,
    hidden: !isRoot,
    render: (info, row) => {
      return (
        <Typography.Link onClick={() => onBillClick(row)}>{ORDER_ACCOUNTING_STATUS_TEXT[info] || '-'}</Typography.Link>
      )
    },
  },
  {
    title: '到货总数',
    dataIndex: 'totalArrivalQty',
    key: 'totalArrivalQty',
    align: 'center',
    width: 150,
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '总到货率',
    dataIndex: 'totalArrivalPercent',
    key: 'totalArrivalPercent',
    align: 'center',
    width: 120,
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '到货总金额',
    dataIndex: 'totalArrivalAmount',
    key: 'totalArrivalAmount',
    align: 'center',
    width: 150,
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '设计师/买手',
    dataIndex: 'designerName',
    key: 'designerName',
    align: 'center',
    width: 120,
    render: (info) => {
      return info || '-'
    },
  },
]

export const useLimitColumns = ({
  classIdOptionsTable,
  setclassIdOptionstable,
}: {
  classIdOptionsTable: IOptionClassEdit[]
  setclassIdOptionstable: React.Dispatch<React.SetStateAction<IOptionClassEdit[]>>
}): TableColumnsType<IOptionClassEdit> => [
  {
    title: '大类',
    dataIndex: 'label',
    key: 'label',
    align: 'center',
    width: 200,
    render: (info) => {
      return info ? info : '-'
    },
  },
  {
    title: '预约发货数量上浮比例',
    dataIndex: 'appointmentFloatingLimit',
    key: 'appointmentFloatingLimit',
    align: 'center',
    width: 150,
    render: (info, rows, index) => {
      return rows.isEdit ? (
        <div style={{ marginLeft: 16, marginRight: 16 }}>
          <InputNumber
            defaultValue={info || ''}
            addonAfter="%"
            precision={2}
            min={0}
            max={100}
            onBlur={() => {
              classIdOptionsTable[index]['isEdit'] = false
              setclassIdOptionstable([...classIdOptionsTable])
            }}
            onChange={(val) => {
              classIdOptionsTable[index].appointmentFloatingLimit = val
              setclassIdOptionstable([...classIdOptionsTable])
            }}
          ></InputNumber>
        </div>
      ) : (
        <div
          className="edit_intable_style"
          onClick={() => {
            classIdOptionsTable[index]['isEdit'] = true
            setclassIdOptionstable([...classIdOptionsTable])
          }}
        >
          {info ? info + '%' : '-'}
        </div>
      )
    },
  },
]

export const useDetailedDetailedColumns = ({
  detailInfo,
  tableData,
  settableData,
  onSave,
  isRoot,
  canEdit,
  getDetail,
  batchEdit,
  setbatchEdit,
  isCommonPrice,
}: {
  detailInfo: Record<string, any>
  tableData: PurchaseOrderCommodityVO[]
  settableData: React.Dispatch<React.SetStateAction<PurchaseOrderCommodityVO[]>>
  onSave: (tableData: PurchaseOrderCommodityVO[]) => void
  isRoot: boolean
  canEdit: boolean
  getDetail: () => void
  batchEdit: boolean
  isCommonPrice: boolean
  setbatchEdit: React.Dispatch<React.SetStateAction<boolean>>
}): TableColumnsType<PurchaseOrderCommodityVO> => {
  const result: TableColumnsType<PurchaseOrderCommodityVO> = [
    {
      title: '款式编码',
      dataIndex: 'spuCode',
      key: 'spuCode',
      align: 'center',
      width: 140,
      render: (info) => {
        return info ? info : '-'
      },
    },
    {
      title: '助记码',
      dataIndex: 'memoryCode',
      key: 'memoryCode',
      align: 'center',
      width: 160,
      render: (info) => {
        return info ? info : '-'
      },
    },
    {
      title: '工厂款号',
      dataIndex: 'factorySpuCode',
      key: 'factorySpuCode',
      align: 'center',
      width: 160,
      render: (info) => {
        return info ? info : '-'
      },
    },
    {
      title: '商品名称',
      dataIndex: 'productName',
      key: 'productName',
      align: 'center',
      width: 200,
      ellipsis: {
        showTitle: false,
      },
      render: (info) => {
        return (
          <Tooltip placement="top" title={info}>
            {info}
          </Tooltip>
        )
      },
    },
    {
      title: '商品分类',
      dataIndex: 'wholeClassName',
      key: 'wholeClassName',
      align: 'center',
      width: 200,
      render: (info) => {
        return info ? info : '-'
      },
    },
    {
      title: '商品条码',
      dataIndex: 'skuCode',
      key: 'skuCode',
      align: 'center',
      width: 160,
      render: (info) => {
        return info ? info : '-'
      },
    },
    {
      title: '尺码',
      dataIndex: 'commoditySize',
      key: 'commoditySize',
      align: 'center',
      width: 120,
      render: (info) => {
        return info ? info : '-'
      },
    },
    {
      title: '颜色',
      dataIndex: 'colorDetailName',
      key: 'colorDetailName',
      align: 'center',
      width: 120,
      render: (info) => {
        return info ? info : '-'
      },
    },
    {
      title: '下单数量',
      dataIndex: 'orderQty',
      key: 'orderQty',
      align: 'center',
      width: 150,
      render: (info, __) => {
        return batchEdit && detailInfo.status === 0 ? (
          <div style={{ marginLeft: 16, marginRight: 16 }}>
            <InputNumber value={info || 0} precision={0} disabled min={0}></InputNumber>
          </div>
        ) : (
          info || '-'
        )
      },
    },
    {
      title: '采购价格',
      dataIndex: 'purchasePrice',
      key: 'purchasePrice',
      align: 'center',
      width: 180,
      render: (info, rows) => {
        return batchEdit && detailInfo.status === 0 ? (
          <div style={{ marginLeft: 16, marginRight: 16 }}>
            <InputNumber
              value={info || 0}
              precision={2}
              min={0}
              onChange={(val) => {
                if (isCommonPrice) {
                  const editData = tableData?.map((item) => {
                    return {
                      ...item,
                      purchasePrice: val,
                    }
                  })
                  settableData([...editData])
                } else {
                  const editData = tableData.map((item) => {
                    return {
                      ...item,
                      purchasePrice: rows?.colorDetailName == item?.colorDetailName ? val : item.purchasePrice,
                    }
                  })
                  settableData([...editData])
                }
              }}
            ></InputNumber>
          </div>
        ) : (
          info || '-'
        )
      },
    },
    {
      title: '采购金额',
      dataIndex: 'purchaseAmount',
      key: 'purchaseAmount',
      align: 'center',
      width: 120,
      render: (_, rows) => {
        return rows.orderQty && rows.purchasePrice
          ? mathjs
              .multiply(mathjs.bignumber(rows?.orderQty || 0), mathjs.bignumber(rows?.purchasePrice || 0))
              .toString()
          : '-'
      },
    },
    {
      title: '吊牌价',
      dataIndex: 'tagPrice',
      key: 'tagPrice',
      align: 'center',
      width: 120,
      render: (info) => {
        return info ? info : '-'
      },
    },
    {
      title: '吊牌金额',
      dataIndex: 'tagAmount',
      key: 'tagAmount',
      align: 'center',
      width: 120,
      render: (_, rows) => {
        return rows.tagPrice
          ? mathjs
              .multiply(
                mathjs.add(
                  mathjs.bignumber(rows.directSaleQty || 0),
                  mathjs.bignumber(rows.franchisingQty || 0),
                  mathjs.bignumber(rows.onlineQty || 0),
                ),
                mathjs.bignumber(rows?.tagPrice || 0),
              )
              .toString()
          : '-'
      },
    },
    {
      title: '已预约发货数量',
      dataIndex: 'scheduledQty',
      key: 'scheduledQty',
      align: 'center',
      width: 130,
      render: (info) => {
        return info ? info : '-'
      },
    },
    {
      title: '在途数量',
      dataIndex: 'onTheWayQty',
      key: 'onTheWayQty',
      align: 'center',
      width: 120,
      render: (info) => {
        return info ? info : '-'
      },
    },
    {
      title: '到货数量',
      dataIndex: 'deliveryQty',
      key: 'deliveryQty',
      align: 'center',
      width: 120,
      render: (info) => {
        return info ? info : '-'
      },
    },
    {
      title: '到货率',
      dataIndex: 'deliveryPercent',
      key: 'deliveryPercent',
      align: 'center',
      width: 120,
      render: (info) => {
        return info ? info : '-'
      },
    },
    {
      title: '直营数量',
      dataIndex: 'directSaleQty',
      key: 'directSaleQty',
      align: 'center',
      width: 150,
      hidden: !isRoot,
      render: (info, rows, index) => {
        return batchEdit ? (
          <div style={{ marginLeft: 16, marginRight: 16 }}>
            <InputNumber
              defaultValue={info || 0}
              precision={0}
              min={0}
              onChange={(val) => {
                tableData[index].directSaleQty = val
                tableData[index].orderQty = val * 1 + Number(rows.franchisingQty || 0) + Number(rows.onlineQty || 0)
                settableData([...tableData])
              }}
            ></InputNumber>
          </div>
        ) : (
          info || '-'
        )
      },
    },
    {
      title: '加盟数量',
      dataIndex: 'franchisingQty',
      key: 'franchisingQty',
      align: 'center',
      width: 150,
      hidden: !isRoot,
      render: (info, rows, index) => {
        return batchEdit ? (
          <div style={{ marginLeft: 16, marginRight: 16 }}>
            <InputNumber
              defaultValue={info || 0}
              precision={0}
              min={0}
              onChange={(val) => {
                tableData[index].franchisingQty = val
                tableData[index].orderQty = val + Number(rows.directSaleQty || 0) + Number(rows.onlineQty || 0)
                settableData([...tableData])
              }}
            ></InputNumber>
          </div>
        ) : (
          info || '-'
        )
      },
    },
    {
      title: '电商数量',
      dataIndex: 'onlineQty',
      key: 'onlineQty',
      align: 'center',
      width: 150,
      hidden: !isRoot,
      render: (info, rows, index) => {
        return batchEdit ? (
          <div style={{ marginLeft: 16, marginRight: 16 }}>
            <InputNumber
              defaultValue={info || 0}
              precision={0}
              min={0}
              onChange={(val) => {
                tableData[index].onlineQty = val
                tableData[index].orderQty = val + Number(rows.franchisingQty || 0) + Number(rows.directSaleQty || 0)
                settableData([...tableData])
              }}
            ></InputNumber>
          </div>
        ) : (
          info || '-'
        )
      },
    },
  ]
  detailInfo?.status == 0 &&
    canEdit &&
    result.unshift({
      title: '操作',
      fixed: 'left',
      align: 'center',
      width: 120,
      onCell: (_, index) => {
        if (index === 0) {
          return {
            rowSpan: tableData.length,
          }
        }
        return { rowSpan: 0 }
      },
      render: (_, __, index) => {
        return (
          <Space size={'large'}>
            {!batchEdit ? (
              <Tooltip placement="top" title="编辑">
                <EditOutlined
                  style={{ color: 'var(--primary-color)', cursor: 'pointer' }}
                  onClick={() => {
                    if (!batchEdit) {
                      setbatchEdit(true)
                    }
                  }}
                />
              </Tooltip>
            ) : (
              <Space>
                <Tooltip placement="top" title="保存">
                  <CheckOutlined
                    style={{ color: 'var(--primary-color)', cursor: 'pointer' }}
                    onClick={() => {
                      if (batchEdit) {
                        setbatchEdit(false)
                        onSave(tableData)
                      }
                    }}
                  />
                </Tooltip>
                <Tooltip placement="top" title="取消">
                  <CloseOutlined
                    style={{ color: 'var(--primary-color)', cursor: 'pointer' }}
                    onClick={() => {
                      setbatchEdit(false)
                      getDetail()
                    }}
                  />
                </Tooltip>
              </Space>
            )}
          </Space>
        )
      },
    })
  return result
}

export const useNumberDel = ({
  onDel,
  isEdit,
}: {
  onDel: (info: PurchaseProduceQtyVO) => void
  isEdit: boolean
}): TableColumnsType<PurchaseProduceQtyVO> => [
  {
    title: '汇报日期',
    dataIndex: 'reportDate',
    key: 'reportDate',
    align: 'center',
    width: 100,
    render: (info) => {
      return info ? info : '-'
    },
  },
  {
    title: '款式编码',
    dataIndex: 'spuCode',
    key: 'spuCode',
    align: 'center',
    width: 100,
    render: (info) => {
      return info ? info : '-'
    },
  },
  {
    title: '颜色',
    dataIndex: 'colorDetailName',
    key: 'colorDetailName',
    align: 'center',
    width: 100,
    render: (info) => {
      return info ? info : '-'
    },
  },
  {
    title: '累计成品数',
    dataIndex: 'totalProductQty',
    key: 'totalProductQty',
    align: 'center',
    width: 100,
    render: (info) => {
      return info >= 0 ? info : '-'
    },
  },
  {
    title: '备注',
    dataIndex: 'remark',
    key: 'remark',
    align: 'center',
    width: 100,
    ellipsis: {
      showTitle: false,
    },
    render: (info) => {
      return (
        <Tooltip placement="topLeft" title={info}>
          {info || '-'}
        </Tooltip>
      )
    },
  },
  {
    title: '操作',
    align: 'center',
    width: 100,
    render: (info) => {
      return (
        <Space size="large">
          <Popconfirm title={`确认删除吗？`} onConfirm={() => onDel(info)} okText="确认" cancelText="取消">
            <Typography.Link disabled={!isEdit} type="danger">
              删除
            </Typography.Link>
          </Popconfirm>
        </Space>
      )
    },
  },
]
export const useTimeColumn = ({
  isEdit,
  planList,
  setplanList,
}: {
  isEdit: boolean
  planList: PurchaseProduceScheduleVO[]
  setplanList: React.Dispatch<React.SetStateAction<PurchaseProduceScheduleVO[]>>
}): TableColumnsType<PurchaseProduceScheduleVO> => [
  {
    title: '款式编码',
    dataIndex: 'spuCode',
    key: 'spuCode',
    align: 'center',
    fixed: 'left',
    width: 150,
    render: (info) => {
      return info ? info : '-'
    },
  },
  {
    title: '颜色',
    dataIndex: 'colorDetailName',
    key: 'colorDetailName',
    align: 'center',
    fixed: 'left',
    width: 150,
    render: (info) => {
      return info ? info : '-'
    },
  },
  {
    title: '计划面料到厂时间',
    dataIndex: 'fabricPlanTime',
    key: 'fabricPlanTime',
    align: 'center',
    width: 200,
    render: (info, rows) => {
      return isEdit ? (
        <DatePicker
          defaultValue={info ? dayjs(info) : null}
          onChange={(val) => {
            const day = val ? dayjs(val).format('YYYY-MM-DD') : '1970-01-01'
            rows.fabricPlanTime = day
            setplanList([...planList])
          }}
        ></DatePicker>
      ) : (
        <span style={{ color: getDateIsLate(rows?.fabricPlanTime, rows?.fabricRealTime) ? 'red' : '' }}>
          {info || '-'}
        </span>
      )
    },
  },
  {
    title: '实际面料到厂时间',
    dataIndex: 'fabricRealTime',
    key: 'fabricRealTime',
    align: 'center',
    width: 200,
    render: (info, rows) => {
      return isEdit ? (
        <DatePicker
          defaultValue={info ? dayjs(info) : null}
          onChange={(val) => {
            const day = val ? dayjs(val).format('YYYY-MM-DD') : '1970-01-01'
            rows.fabricRealTime = day
            setplanList([...planList])
          }}
        ></DatePicker>
      ) : (
        info || '-'
      )
    },
  },
  {
    title: '计划产前样时间',
    dataIndex: 'sampleClothingPlanTime',
    key: 'sampleClothingPlanTime',
    align: 'center',
    width: 200,
    render: (info, rows) => {
      return isEdit ? (
        <DatePicker
          defaultValue={info ? dayjs(info) : null}
          onChange={(val) => {
            const day = val ? dayjs(val).format('YYYY-MM-DD') : '1970-01-01'
            rows.sampleClothingPlanTime = day
            setplanList([...planList])
          }}
        ></DatePicker>
      ) : (
        <span style={{ color: getDateIsLate(rows?.sampleClothingPlanTime, rows?.sampleClothingRealTime) ? 'red' : '' }}>
          {info || '-'}
        </span>
      )
    },
  },
  {
    title: '实际产前样时间',
    dataIndex: 'sampleClothingRealTime',
    key: 'sampleClothingRealTime',
    align: 'center',
    width: 200,
    render: (info, rows) => {
      return isEdit ? (
        <DatePicker
          defaultValue={info ? dayjs(info) : null}
          onChange={(val) => {
            const day = val ? dayjs(val).format('YYYY-MM-DD') : '1970-01-01'
            rows.sampleClothingRealTime = day
            setplanList([...planList])
          }}
        ></DatePicker>
      ) : (
        info || '-'
      )
    },
  },
  {
    title: '计划成品送检时间',
    dataIndex: 'productInspectPlanTime',
    key: 'productInspectPlanTime',
    align: 'center',
    width: 200,
    render: (info, rows) => {
      return isEdit ? (
        <DatePicker
          defaultValue={info ? dayjs(info) : null}
          onChange={(val) => {
            const day = val ? dayjs(val).format('YYYY-MM-DD') : '1970-01-01'
            rows.productInspectPlanTime = day
            setplanList([...planList])
          }}
        ></DatePicker>
      ) : (
        <span style={{ color: getDateIsLate(rows?.productInspectPlanTime, rows?.productInspectRealTime) ? 'red' : '' }}>
          {info || '-'}
        </span>
      )
    },
  },
  {
    title: '实际成品送检时间',
    dataIndex: 'productInspectRealTime',
    key: 'productInspectRealTime',
    align: 'center',
    width: 200,
    render: (info, rows) => {
      return isEdit ? (
        <DatePicker
          defaultValue={info ? dayjs(info) : null}
          onChange={(val) => {
            const day = val ? dayjs(val).format('YYYY-MM-DD') : '1970-01-01'
            rows.productInspectRealTime = day
            setplanList([...planList])
          }}
        ></DatePicker>
      ) : (
        info || '-'
      )
    },
  },
  {
    title: '计划产前会时间',
    dataIndex: 'preMeetingPlanTime',
    key: 'preMeetingPlanTime',
    align: 'center',
    width: 200,
    render: (info, rows) => {
      return isEdit ? (
        <DatePicker
          defaultValue={info ? dayjs(info) : null}
          onChange={(val) => {
            const day = val ? dayjs(val).format('YYYY-MM-DD') : '1970-01-01'
            rows.preMeetingPlanTime = day
            setplanList([...planList])
          }}
        ></DatePicker>
      ) : (
        <span style={{ color: getDateIsLate(rows?.preMeetingPlanTime, rows?.preMeetingRealTime) ? 'red' : '' }}>
          {info || '-'}
        </span>
      )
    },
  },
  {
    title: '实际产前会时间',
    dataIndex: 'preMeetingRealTime',
    key: 'preMeetingRealTime',
    align: 'center',
    width: 200,
    render: (info, rows) => {
      return isEdit ? (
        <DatePicker
          defaultValue={info ? dayjs(info) : null}
          onChange={(val) => {
            const day = val ? dayjs(val).format('YYYY-MM-DD') : '1970-01-01'
            rows.preMeetingRealTime = day
            setplanList([...planList])
          }}
        ></DatePicker>
      ) : (
        info || '-'
      )
    },
  },
  {
    title: '计划上线生产时间',
    dataIndex: 'publishPlanTime',
    key: 'publishPlanTime',
    align: 'center',
    width: 200,
    render: (info, rows) => {
      return isEdit ? (
        <DatePicker
          defaultValue={info ? dayjs(info) : null}
          onChange={(val) => {
            const day = val ? dayjs(val).format('YYYY-MM-DD') : '1970-01-01'
            rows.publishPlanTime = day
            setplanList([...planList])
          }}
        ></DatePicker>
      ) : (
        <span style={{ color: getDateIsLate(rows?.publishPlanTime, rows?.publishRealTime) ? 'red' : '' }}>
          {info || '-'}
        </span>
      )
    },
  },
  {
    title: '实际上线生产时间',
    dataIndex: 'publishRealTime',
    key: 'publishRealTime',
    align: 'center',
    width: 200,
    render: (info, rows) => {
      return isEdit ? (
        <DatePicker
          defaultValue={info ? dayjs(info) : null}
          onChange={(val) => {
            const day = val ? dayjs(val).format('YYYY-MM-DD') : '1970-01-01'
            rows.publishRealTime = day
            setplanList([...planList])
          }}
        ></DatePicker>
      ) : (
        info || '-'
      )
    },
  },
  {
    title: '计划初期查货时间',
    dataIndex: 'earlyInspectPlanTime',
    key: 'earlyInspectPlanTime',
    align: 'center',
    width: 200,
    render: (info, rows) => {
      return isEdit ? (
        <DatePicker
          defaultValue={info ? dayjs(info) : null}
          onChange={(val) => {
            const day = val ? dayjs(val).format('YYYY-MM-DD') : '1970-01-01'
            rows.earlyInspectPlanTime = day
            setplanList([...planList])
          }}
        ></DatePicker>
      ) : (
        <span style={{ color: getDateIsLate(rows?.earlyInspectPlanTime, rows?.earlyInspectRealTime) ? 'red' : '' }}>
          {info || '-'}
        </span>
      )
    },
  },
  {
    title: '实际初期查货时间',
    dataIndex: 'earlyInspectRealTime',
    key: 'earlyInspectRealTime',
    align: 'center',
    width: 200,
    render: (info, rows) => {
      return isEdit ? (
        <DatePicker
          defaultValue={info ? dayjs(info) : null}
          onChange={(val) => {
            const day = val ? dayjs(val).format('YYYY-MM-DD') : '1970-01-01'
            rows.earlyInspectRealTime = day
            setplanList([...planList])
          }}
        ></DatePicker>
      ) : (
        info || '-'
      )
    },
  },
  {
    title: '计划中期查货时间',
    dataIndex: 'middleInspectPlanTime',
    key: 'middleInspectPlanTime',
    align: 'center',
    width: 200,
    render: (info, rows) => {
      return isEdit ? (
        <DatePicker
          defaultValue={info ? dayjs(info) : null}
          onChange={(val) => {
            const day = val ? dayjs(val).format('YYYY-MM-DD') : '1970-01-01'
            rows.middleInspectPlanTime = day
            setplanList([...planList])
          }}
        ></DatePicker>
      ) : (
        <span style={{ color: getDateIsLate(rows?.middleInspectPlanTime, rows?.middleInspectRealTime) ? 'red' : '' }}>
          {info || '-'}
        </span>
      )
    },
  },
  {
    title: '实际中期查货时间',
    dataIndex: 'middleInspectRealTime',
    key: 'middleInspectRealTime',
    align: 'center',
    width: 200,
    render: (info, rows) => {
      return isEdit ? (
        <DatePicker
          defaultValue={info ? dayjs(info) : null}
          onChange={(val) => {
            const day = val ? dayjs(val).format('YYYY-MM-DD') : '1970-01-01'
            rows.middleInspectRealTime = day
            setplanList([...planList])
          }}
        ></DatePicker>
      ) : (
        info || '-'
      )
    },
  },
  {
    title: '计划下线时间',
    dataIndex: 'offlinePlanTime',
    key: 'offlinePlanTime',
    align: 'center',
    width: 200,
    render: (info, rows) => {
      return isEdit ? (
        <DatePicker
          defaultValue={info ? dayjs(info) : null}
          onChange={(val) => {
            const day = val ? dayjs(val).format('YYYY-MM-DD') : '1970-01-01'
            rows.offlinePlanTime = day
            setplanList([...planList])
          }}
        ></DatePicker>
      ) : (
        <span style={{ color: getDateIsLate(rows?.offlinePlanTime, rows?.offlineRealTime) ? 'red' : '' }}>
          {info || '-'}
        </span>
      )
    },
  },
  {
    title: '实际下线时间',
    dataIndex: 'offlineRealTime',
    key: 'offlineRealTime',
    align: 'center',
    width: 200,
    render: (info, rows) => {
      return isEdit ? (
        <DatePicker
          defaultValue={info ? dayjs(info) : null}
          onChange={(val) => {
            const day = val ? dayjs(val).format('YYYY-MM-DD') : '1970-01-01'
            rows.offlineRealTime = day
            setplanList([...planList])
          }}
        ></DatePicker>
      ) : (
        info || '-'
      )
    },
  },
  {
    title: '计划尾查时间',
    dataIndex: 'laterPlanTime',
    key: 'laterPlanTime',
    align: 'center',
    width: 200,
    render: (info, rows) => {
      return isEdit ? (
        <DatePicker
          defaultValue={info ? dayjs(info) : null}
          onChange={(val) => {
            const day = val ? dayjs(val).format('YYYY-MM-DD') : '1970-01-01'
            rows.laterPlanTime = day
            setplanList([...planList])
          }}
        ></DatePicker>
      ) : (
        <span style={{ color: getDateIsLate(rows?.laterPlanTime, rows?.laterRealTime) ? 'red' : '' }}>
          {info || '-'}
        </span>
      )
    },
  },
  {
    title: '实际尾查时间',
    dataIndex: 'laterRealTime',
    key: 'laterRealTime',
    align: 'center',
    width: 200,
    render: (info, rows) => {
      return isEdit ? (
        <DatePicker
          defaultValue={info ? dayjs(info) : null}
          onChange={(val) => {
            const day = val ? dayjs(val).format('YYYY-MM-DD') : '1970-01-01'
            rows.laterRealTime = day
            setplanList([...planList])
          }}
        ></DatePicker>
      ) : (
        info || '-'
      )
    },
  },
]
export const useArrivalColumns = (): TableColumnsType<ITableDataArriavl> => [
  {
    title: '预约发货单',
    dataIndex: 'reserveInvoiceCode',
    key: 'reserveInvoiceCode',
    align: 'center',
    width: 160,
    render: (info) => {
      return info ? info : '-'
    },
  },
  {
    title: '到货时间',
    dataIndex: 'deliveryTime',
    key: 'deliveryTime',
    align: 'center',
    width: 160,
    render: (info) => {
      return info ? info : '-'
    },
  },
  {
    title: '商品条码',
    dataIndex: 'reserveInvoiceDetailVOList',
    key: 'reserveInvoiceDetailVOList',
    align: 'center',
    width: 160,
    render: (_, rows) => {
      if (rows.reserveInvoiceDetailVOList && rows.reserveInvoiceDetailVOList.length > 0) {
        return rows?.reserveInvoiceDetailVOList?.map((item) => {
          return (
            <div className="border_bottom_nolast ant-table-cell-ellipsis" key={item?.productSimpleVO?.skuCode}>
              {item?.productSimpleVO?.skuCode || '-'}
            </div>
          )
        })
      } else {
        return '-'
      }
    },
  },
  {
    title: '预约发货数量',
    dataIndex: 'scheduleQty',
    key: 'scheduleQty',
    align: 'center',
    width: 160,
    render: (_, rows) => {
      if (rows.reserveInvoiceDetailVOList && rows.reserveInvoiceDetailVOList.length > 0) {
        return rows?.reserveInvoiceDetailVOList?.map((item) => {
          return (
            <div className="border_bottom_nolast ant-table-cell-ellipsis" key={item?.scheduleQty}>
              {item?.scheduleQty || '-'}
            </div>
          )
        })
      } else {
        return '-'
      }
    },
  },
  {
    title: '到货数量',
    dataIndex: 'arriveQty',
    key: 'arriveQty',
    align: 'center',
    width: 160,
    render: (_, rows) => {
      if (rows.reserveInvoiceDetailVOList && rows.reserveInvoiceDetailVOList.length > 0) {
        return rows?.reserveInvoiceDetailVOList?.map((item) => {
          return (
            <div className="border_bottom_nolast ant-table-cell-ellipsis" key={item?.arriveQty}>
              {item?.arriveQty || '-'}
            </div>
          )
        })
      } else {
        return '-'
      }
    },
  },
]
export const useBillDetailColumns = (): TableColumnsType<BillInfoVO> => [
  {
    title: '应付日期',
    dataIndex: 'payableDate',
    key: 'payableDate',
    align: 'center',
    width: 150,
    render: (info) => {
      return info ? info : '-'
    },
  },
  {
    title: '应付比例（%）',
    dataIndex: 'payablePercent',
    key: 'payablePercent',
    align: 'center',
    width: 150,
    render: (info) => {
      return info ? info : '-'
    },
  },
  {
    title: '应付金额',
    dataIndex: 'payableAmount',
    key: 'payableAmount',
    align: 'center',
    width: 150,
    render: (info) => {
      return info ? info : '-'
    },
  },
  {
    title: '是否预付',
    dataIndex: 'prepayment',
    key: 'prepayment',
    align: 'center',
    width: 150,
    render: (info) => {
      return info == 1 ? '是' : '否'
    },
  },
  {
    title: '预付单号',
    dataIndex: 'payableBillNo',
    key: 'payableBillNo',
    align: 'center',
    width: 150,
    render: (info) => {
      return info ? info : '-'
    },
  },
  {
    title: '物料编码',
    dataIndex: 'productSn',
    key: 'productSn',
    align: 'center',
    width: 150,
    render: (info) => {
      return info ? info : '-'
    },
  },
  {
    title: '物料名称',
    dataIndex: 'payMaterialDesc',
    key: 'payMaterialDesc',
    align: 'center',
    width: 150,
    render: (info) => {
      return info ? info : '-'
    },
  },
  {
    title: '单次预付额度',
    dataIndex: 'insPrepaidAmount',
    key: 'insPrepaidAmount',
    align: 'center',
    width: 150,
    render: (info) => {
      return info ? info : '-'
    },
  },
  {
    title: '实际预付额度',
    dataIndex: 'actualAmount',
    key: 'actualAmount',
    align: 'center',
    width: 150,
    render: (info) => {
      return info ? info : '-'
    },
  },
  {
    title: '付款关联金额',
    dataIndex: 'payJoinAmount',
    key: 'payJoinAmount',
    align: 'center',
    width: 150,
    render: (info) => {
      return info ? info : '-'
    },
  },
  {
    title: '备注',
    dataIndex: 'remark',
    key: 'remark',
    align: 'center',
    width: 150,
    render: (info) => {
      return info ? info : '-'
    },
  },
]

export const useDetailedColumns = ({
  tableData,
  settableData,
}: {
  tableData: ProductSimpleVO[]
  settableData: React.Dispatch<React.SetStateAction<ProductSimpleVO[]>>
}): TableColumnsType<ProductSimpleVO> => {
  return [
    {
      title: '操作',
      fixed: 'left',
      align: 'center',
      width: 160,
      render: (_, __, index) => {
        return (
          <Space size={'large'}>
            <Tooltip placement="top" title="删除">
              <DeleteOutlined
                style={{ color: 'var(--error-color)', cursor: 'pointer' }}
                onClick={() => {
                  tableData.splice(index, 1)
                  settableData([...tableData])
                }}
              />
            </Tooltip>
          </Space>
        )
      },
    },
    {
      title: '款式编码',
      dataIndex: 'spuCode',
      key: 'spuCode',
      align: 'center',
      width: 160,
      render: (info) => {
        return info ? info : '-'
      },
    },
    {
      title: '助记码',
      dataIndex: 'designCode',
      key: 'designCode',
      align: 'center',
      width: 160,
      render: (info) => {
        return info ? info : '-'
      },
    },
    {
      title: '工厂款号',
      dataIndex: 'factorySpuCode',
      key: 'factorySpuCode',
      align: 'center',
      width: 160,
      render: (info) => {
        return info ? info : '-'
      },
    },
    {
      title: '商品名称',
      dataIndex: 'spuName',
      key: 'spuName',
      align: 'center',
      width: 160,
      ellipsis: {
        showTitle: false,
      },
      render: (info) => {
        return (
          <Tooltip placement="top" title={info}>
            {info}
          </Tooltip>
        )
      },
    },
    {
      title: '商品分类',
      dataIndex: 'className',
      key: 'className',
      align: 'center',
      width: 250,
      render: (info) => {
        return info ? info : '-'
      },
    },
    {
      title: '商品条码',
      dataIndex: 'skuCode',
      key: 'skuCode',
      align: 'center',
      width: 160,
      render: (info) => {
        return info ? info : '-'
      },
    },
    {
      title: '尺码',
      dataIndex: 'commoditySize',
      key: 'commoditySize',
      align: 'center',
      width: 160,
      render: (info) => {
        return info ? info : '-'
      },
    },
    {
      title: '颜色',
      dataIndex: 'colorDetailName',
      key: 'colorDetailName',
      align: 'center',
      width: 160,
      render: (info) => {
        return info ? info : '-'
      },
    },
    {
      title: '下单数量',
      dataIndex: 'orderQty',
      key: 'orderQty',
      align: 'center',
      width: 150,
      render: (info, rows, index) => {
        return (
          <div style={{ marginLeft: 16, marginRight: 16 }}>
            <InputNumber
              defaultValue={info || 0}
              precision={0}
              min={0}
              onChange={(val) => {
                tableData[index].orderQty = val
                settableData([...tableData])
              }}
            ></InputNumber>
          </div>
        )
      },
    },
    {
      title: '采购价格',
      dataIndex: 'purchasePrice',
      key: 'purchasePrice',
      align: 'center',
      width: 180,
      render: (info, __, index) => {
        return (
          <div style={{ marginLeft: 16, marginRight: 16 }}>
            <InputNumber
              defaultValue={info || 0}
              precision={2}
              min={0}
              onChange={(val) => {
                tableData[index].purchasePrice = val
                settableData([...tableData])
              }}
            ></InputNumber>
          </div>
        )
      },
    },
    {
      title: '直营数量',
      dataIndex: 'directSaleQty',
      key: 'directSaleQty',
      align: 'center',
      width: 150,
      render: (info, __, index) => {
        return (
          <div style={{ marginLeft: 16, marginRight: 16 }}>
            <InputNumber
              defaultValue={info || 0}
              precision={0}
              min={0}
              onChange={(val) => {
                tableData[index].directSaleQty = val
                settableData([...tableData])
              }}
            ></InputNumber>
          </div>
        )
      },
    },
    {
      title: '加盟数量',
      dataIndex: 'franchisingQty',
      key: 'franchisingQty',
      align: 'center',
      width: 150,
      render: (info, __, index) => {
        return (
          <div style={{ marginLeft: 16, marginRight: 16 }}>
            <InputNumber
              defaultValue={info || 0}
              precision={0}
              min={0}
              onChange={(val) => {
                tableData[index].franchisingQty = val
                settableData([...tableData])
              }}
            ></InputNumber>
          </div>
        )
      },
    },
    {
      title: '电商数量',
      dataIndex: 'onlineQty',
      key: 'onlineQty',
      align: 'center',
      width: 150,
      render: (info, __, index) => {
        return (
          <div style={{ marginLeft: 16, marginRight: 16 }}>
            <InputNumber
              defaultValue={info || 0}
              precision={0}
              min={0}
              onChange={(val) => {
                tableData[index].onlineQty = val
                settableData([...tableData])
              }}
            ></InputNumber>
          </div>
        )
      },
    },
    {
      title: '采购金额',
      dataIndex: 'purchaseAmount',
      key: 'purchaseAmount',
      align: 'center',
      width: 160,
      render: (_, rows) => {
        return rows.orderQty && rows.purchasePrice
          ? mathjs
              .multiply(mathjs.bignumber(rows?.orderQty || 0), mathjs.bignumber(rows?.purchasePrice || 0))
              .toString()
          : '-'
      },
    },
    {
      title: '吊牌价',
      dataIndex: 'originSalePrice',
      key: 'originSalePrice',
      align: 'center',
      width: 160,
      render: (info) => {
        return info ? info : '-'
      },
    },
    {
      title: '吊牌金额',
      dataIndex: 'tagAmount',
      key: 'tagAmount',
      align: 'center',
      width: 160,
      render: (_, rows) => {
        return rows.orderQty && rows.originSalePrice
          ? mathjs
              .multiply(mathjs.bignumber(rows?.orderQty || 0), mathjs.bignumber(rows?.originSalePrice || 0))
              .toString()
          : '-'
      },
    },
  ]
}

export const useViewSpuColumns = ({
  selectedRowKeys,
  viewList,
  setviewList,
}: {
  setviewList: React.Dispatch<React.SetStateAction<ProductSimpleVO[]>>
  viewList: ProductSimpleVO[]
  selectedRowKeys: React.Key[]
}): TableColumnsType<ProductSimpleVO> => {
  return [
    {
      title: '商品名称',
      dataIndex: 'spuName',
      key: 'spuName',
      align: 'center',
      width: 160,
      ellipsis: {
        showTitle: false,
      },
      render: (info) => {
        return (
          <Tooltip placement="top" title={info}>
            {info}
          </Tooltip>
        )
      },
    },
    {
      title: '款式编码',
      dataIndex: 'spuCode',
      key: 'spuCode',
      align: 'center',
      width: 160,
      render: (info) => {
        return info ? info : '-'
      },
    },
    {
      title: '助记码',
      dataIndex: 'designCode',
      key: 'designCode',
      align: 'center',
      width: 160,
      render: (info) => {
        return info ? info : '-'
      },
    },
    {
      title: '工厂款号',
      dataIndex: 'factorySpuCode',
      key: 'factorySpuCode',
      align: 'center',
      width: 160,
      render: (info) => {
        return info ? info : '-'
      },
    },
    {
      title: '商品条码',
      dataIndex: 'skuCode',
      key: 'skuCode',
      align: 'center',
      width: 160,
      render: (info) => {
        return info ? info : '-'
      },
    },
    {
      title: '尺码',
      dataIndex: 'commoditySize',
      key: 'commoditySize',
      align: 'center',
      width: 160,
      render: (info) => {
        return info ? info : '-'
      },
    },
    {
      title: '颜色',
      dataIndex: 'colorDetailName',
      key: 'colorDetailName',
      align: 'center',
      width: 160,
      render: (info) => {
        return info ? info : '-'
      },
    },
    {
      title: '下单数量',
      dataIndex: 'orderQty',
      key: 'orderQty',
      align: 'center',
      width: 150,
      render: (info, rows, index) => {
        return selectedRowKeys?.includes(rows.skuCode) ? (
          <div style={{ marginLeft: 16, marginRight: 16 }}>
            <InputNumber
              defaultValue={info || 0}
              precision={0}
              min={0}
              onChange={(val) => {
                rows.orderQty = val
                setviewList([...viewList])
              }}
            ></InputNumber>
          </div>
        ) : (
          '-'
        )
      },
    },
    {
      title: '采购价格',
      dataIndex: 'purchasePrice',
      key: 'purchasePrice',
      align: 'center',
      width: 180,
      render: (info, rows) => {
        return selectedRowKeys?.includes(rows.skuCode) ? (
          <div style={{ marginLeft: 16, marginRight: 16 }}>
            <InputNumber
              value={info || 0}
              precision={2}
              min={0}
              onChange={(val) => {
                const newViewList = viewList?.map((item) => {
                  if (selectedRowKeys.includes(item.skuCode)) {
                    return {
                      ...item,
                      purchasePrice: val,
                    }
                  } else {
                    return {
                      ...item,
                    }
                  }
                })
                setviewList([...newViewList])
              }}
            ></InputNumber>
          </div>
        ) : (
          '-'
        )
      },
    },
    {
      title: '直营数量',
      dataIndex: 'directSaleQty',
      key: 'directSaleQty',
      align: 'center',
      width: 150,
      render: (info, rows) => {
        return selectedRowKeys?.includes(rows.skuCode) ? (
          <div style={{ marginLeft: 16, marginRight: 16 }}>
            <InputNumber
              defaultValue={info || 0}
              precision={0}
              min={0}
              onChange={(val) => {
                rows.directSaleQty = val
                setviewList([...viewList])
              }}
            ></InputNumber>
          </div>
        ) : (
          '-'
        )
      },
    },
    {
      title: '加盟数量',
      dataIndex: 'franchisingQty',
      key: 'franchisingQty',
      align: 'center',
      width: 150,
      render: (info, rows) => {
        return selectedRowKeys?.includes(rows.skuCode) ? (
          <div style={{ marginLeft: 16, marginRight: 16 }}>
            <InputNumber
              defaultValue={info || 0}
              precision={0}
              min={0}
              onChange={(val) => {
                rows.franchisingQty = val
                setviewList([...viewList])
              }}
            ></InputNumber>
          </div>
        ) : (
          '-'
        )
      },
    },
    {
      title: '电商数量',
      dataIndex: 'onlineQty',
      key: 'onlineQty',
      align: 'center',
      width: 150,
      render: (info, rows) => {
        return selectedRowKeys?.includes(rows.skuCode) ? (
          <div style={{ marginLeft: 16, marginRight: 16 }}>
            <InputNumber
              defaultValue={info || 0}
              precision={0}
              min={0}
              onChange={(val) => {
                rows.onlineQty = val
                setviewList([...viewList])
              }}
            ></InputNumber>
          </div>
        ) : (
          '-'
        )
      },
    },
  ]
}

export const useFabricTableDataColumns = ({
  isRoot,
  FabricTableData,
  setFabricTableData,
}: {
  isRoot: boolean
  FabricTableData: PurchaseFabricOrderVO[]
  setFabricTableData: React.Dispatch<React.SetStateAction<PurchaseFabricOrderVO[]>>
}): TableColumnsType<PurchaseFabricBaseVO> => {
  const spanArr = calculateRowSpans(FabricTableData || [], 'purchaseOrderCode')
  const spanArrColor = calculateRowSpans(FabricTableData || [], 'colorDetailName', 'purchaseOrderCode')
  const spanArrOrderQty = calculateRowSpans(FabricTableData || [], 'colorDetailName', 'purchaseOrderCode')
  return [
    {
      title: '采购订单号',
      dataIndex: 'purchaseOrderCode',
      key: 'purchaseOrderCode',
      align: 'center',
      width: 150,
      onCell: (_, index) => {
        return { rowSpan: index != undefined ? spanArr[index] : 0 }
      },
      render: (info) => info || '-',
    },
    {
      title: '款式图',
      dataIndex: 'spuImage',
      key: 'spuImage',
      align: 'center',
      width: 140,
      onCell: (_, index) => {
        return { rowSpan: index != undefined ? spanArr[index] : 0 }
      },
      render: (info) => {
        return (
          <Image rootClassName="table_image" width={40} height={40} src={info} fallback={getImageByUrl('moren.png')} />
        )
      },
    },
    {
      title: '款式编码',
      dataIndex: 'spuCode',
      key: 'spuCode',
      align: 'center',
      width: 140,
      onCell: (_, index) => {
        return { rowSpan: index != undefined ? spanArr[index] : 0 }
      },
      render: (info) => info || '-',
    },
    {
      title: '报价单明细参考',
      dataIndex: 'a12',
      key: 'a12',
      align: 'center',
      width: 140,
      onCell: (_, index) => {
        return { rowSpan: index != undefined ? spanArr[index] : 0 }
      },
      render: (_, rows) => {
        return (
          <Tooltip
            color="#fff"
            overlayInnerStyle={{ width: 'max-content' }}
            title={
              <div className="small_sise_customtable">
                <Table
                  bordered
                  pagination={false}
                  rowHoverable={false}
                  rowKey="planNo"
                  dataSource={rows?.quotationMainFabricVOS || []}
                  columns={[
                    {
                      title: '使用部位',
                      dataIndex: 'useSite',
                      key: 'useSite',
                      align: 'center',
                      width: 120,
                      render: (info) => info || '-',
                    },
                    {
                      title: '面料名称',
                      dataIndex: 'fabricName',
                      key: 'fabricName',
                      align: 'center',
                      width: 120,
                      render: (info) => info || '-',
                    },
                    {
                      title: '有效幅宽(cm)',
                      dataIndex: 'fabricBreadth',
                      key: 'fabricBreadth',
                      align: 'center',
                      width: 120,
                      render: (info) => info || '-',
                    },
                    {
                      title: '克重(g/m²)',
                      dataIndex: 'gramWeight',
                      key: 'gramWeight',
                      align: 'center',
                      width: 120,
                      render: (info) => info || '-',
                    },
                    {
                      title: '单位',
                      dataIndex: 'unit',
                      key: 'unit',
                      align: 'center',
                      width: 120,
                      render: (info) => info || '-',
                    },
                    {
                      title: '单件用量',
                      dataIndex: 'unitUsedNum',
                      key: 'unitUsedNum',
                      align: 'center',
                      width: 120,
                      render: (info) => info || '-',
                    },
                  ]}
                ></Table>
              </div>
            }
          >
            <Typography.Link>查看</Typography.Link>
          </Tooltip>
        )
      },
    },
    {
      title: '款式色',
      dataIndex: 'colorDetailName',
      key: 'colorDetailName',
      align: 'center',
      width: 140,
      onCell: (_, index) => {
        return { rowSpan: index != undefined ? spanArrColor[index] : 0 }
      },
      render: (info) => info || '-',
    },
    {
      title: '成衣下单件数',
      dataIndex: 'orderQty',
      key: 'orderQty',
      align: 'center',
      width: 140,
      onCell: (_, index) => {
        return { rowSpan: index != undefined ? spanArrOrderQty[index] : 0 }
      },
      render: (info) => info || '-',
    },
    {
      title: '面料名称',
      dataIndex: 'fabricName',
      key: 'fabricName',
      align: 'center',
      width: 140,
      render: (info) => info || '-',
    },
    {
      title: (
        <div style={{ display: 'flex', alignItems: 'center', gap: 4, justifyContent: 'center' }}>
          面料供应商
          <Tooltip placement="top" title="一键填充">
            <ThunderboltOutlined
              style={{ color: 'var(--primary-color)', cursor: 'pointer', marginTop: 2 }}
              onClick={() => {
                const firstSupplierCode = FabricTableData[0]?.supplierCode
                if (!firstSupplierCode) return
                const newFabricTableData = FabricTableData?.map((item) => {
                  if (item?.supplierInfoList && item?.supplierInfoList.length > 0) {
                    const items = firstSupplierCode
                      ? item?.supplierInfoList?.some((it: any) => it?.supplierCode == firstSupplierCode)
                        ? FabricTableData[0]
                        : {}
                      : {}
                    return {
                      ...item,
                      supplierCode: items?.supplierCode || null,
                      supplierName: items?.supplierName || null,
                      fabricUnitPrice: items?.fabricUnitPrice || null,
                      fabricUnit: items?.fabricUnit || null,
                      remark: items?.remark || null,
                      totalPrice: mathjs.format(
                        mathjs.multiply(
                          mathjs.bignumber(item?.colorFabricOrderQty || 0),
                          mathjs.bignumber(item?.fabricUnitPrice || 0),
                        ),
                        {
                          notation: 'fixed',
                          precision: 2,
                        },
                      ),
                    }
                  } else {
                    return item
                  }
                })
                setFabricTableData([...newFabricTableData])
              }}
            />
          </Tooltip>
        </div>
      ),
      dataIndex: 'supplierCode',
      key: 'supplierCode',
      align: 'center',
      width: 140,
      render: (_, rows) => {
        return (
          <div className="border_bottom_nolast ant-table-cell-ellipsis">
            <Select
              placeholder="请选择"
              style={{ width: 120 }}
              options={rows?.supplierInfoList || []}
              popupMatchSelectWidth={false}
              showSearch
              allowClear
              optionFilterProp="supplierName"
              filterOption={true}
              fieldNames={{ label: 'supplierName', value: 'supplierCode' }}
              value={rows?.supplierCode || null}
              onChange={async (_, items: any) => {
                console.log(items, 'items')
                rows.supplierCode = items?.supplierCode || null
                rows.supplierName = items?.supplierName || null
                rows.fabricUnitPrice = items?.fabricUnitPrice || null
                rows.fabricUnit = items?.fabricUnit || null
                rows.remark = items?.remark || null
                if (rows?.colorFabricOrderQty) {
                  rows.totalPrice = mathjs.format(
                    mathjs.multiply(
                      mathjs.bignumber(rows?.colorFabricOrderQty || 0),
                      mathjs.bignumber(rows?.fabricUnitPrice || 0),
                    ),
                    {
                      notation: 'fixed',
                      precision: 2,
                    },
                  )
                }
                setFabricTableData([...FabricTableData])
              }}
              notFoundContent={<Empty description="请输入内容搜索" image={Empty.PRESENTED_IMAGE_SIMPLE} />}
            ></Select>
          </div>
        )
      },
    },
    {
      title: '使用部位',
      dataIndex: 'useSite',
      key: 'useSite',
      align: 'center',
      width: 140,
      render: (info) => info || '-',
    },
    {
      title: '面料色',
      dataIndex: 'fabricColorDetailName',
      key: 'fabricColorDetailName',
      align: 'center',
      width: 140,
      render: (_, rows) => rows.fabricColorCode + '-' + rows.fabricColorDetailName,
    },
    {
      title: '色布编码',
      dataIndex: 'colorFabricCode',
      key: 'colorFabricCode',
      align: 'center',
      width: 160,
      render: (info) => info || '-',
    },
    {
      title: (
        <div style={{ display: 'flex', alignItems: 'center', gap: 4, justifyContent: 'center' }}>
          单件用量
          <Tooltip placement="top" title="一键填充参考值">
            <ThunderboltOutlined
              style={{ color: 'var(--primary-color)', cursor: 'pointer', marginTop: 2 }}
              onClick={() => {
                console.log(FabricTableData, 'FabricTableData')
                FabricTableData?.forEach((bg) => {
                  bg.myunitUsedNum = bg?.unitUsedNum || null
                })
                setFabricTableData([...FabricTableData])
              }}
            />
          </Tooltip>
        </div>
      ),
      dataIndex: 'myunitUsedNum',
      key: 'myunitUsedNum',
      align: 'center',
      width: 240,
      render: (_, rows) => {
        return (
          <div
            className="border_bottom_nolast ant-table-cell-ellipsis"
            style={{ display: 'flex', alignItems: 'center', gap: 4 }}
          >
            <div style={{ width: 110, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <InputNumber
                value={rows?.myunitUsedNum || null}
                style={{ width: '100%' }}
                precision={6}
                min={0}
                placeholder="请输入"
                onChange={(val) => {
                  rows.myunitUsedNum = val
                  setFabricTableData([...FabricTableData])
                }}
                addonAfter={rows?.fabricUnit || ''}
              ></InputNumber>
            </div>
            <span style={{ fontSize: 12, flexShrink: 0 }}>
              参考值：{rows?.unitUsedNum ? rows?.unitUsedNum + (rows?.fabricUnit || '') : '-'}
            </span>
          </div>
        )
      },
    },
    {
      title: '理论用量',
      dataIndex: 'theoreticalConsumption',
      key: 'theoreticalConsumption',
      align: 'center',
      width: 140,
      render: (_, rows) => {
        return (
          <div className="border_bottom_nolast ant-table-cell-ellipsis">
            {mathjs.format(
              mathjs.multiply(mathjs.bignumber(rows?.orderQty), mathjs.bignumber(rows?.myunitUsedNum || 0)),
              {
                notation: 'fixed',
                precision: 2,
              },
            )}
          </div>
        )
      },
    },
    {
      title: (
        <div style={{ display: 'flex', alignItems: 'center', gap: 4, justifyContent: 'center' }}>
          色布实际下单量
          <Tooltip placement="top" title="一键填充理论用量">
            <ThunderboltOutlined
              style={{ color: 'var(--primary-color)', cursor: 'pointer', marginTop: 2 }}
              onClick={() => {
                FabricTableData?.forEach((bg) => {
                  bg.colorFabricOrderQty =
                    mathjs.format(
                      mathjs.multiply(mathjs.bignumber(bg?.orderQty), mathjs.bignumber(bg?.myunitUsedNum || 0)),
                      {
                        notation: 'fixed',
                        precision: 2,
                      },
                    ) || null
                })
                setFabricTableData([...FabricTableData])
              }}
            />
          </Tooltip>
        </div>
      ),
      dataIndex: 'colorFabricOrderQty',
      key: 'colorFabricOrderQty',
      align: 'center',
      width: 140,
      render: (_, rows) => {
        return (
          <div
            className="border_bottom_nolast ant-table-cell-ellipsis"
            style={{ display: 'flex', alignItems: 'center', gap: 4 }}
          >
            <InputNumber
              value={rows?.colorFabricOrderQty || null}
              precision={2}
              min={0}
              placeholder="请输入"
              onChange={(val) => {
                rows.colorFabricOrderQty = val
                setFabricTableData([...FabricTableData])
              }}
              addonAfter={rows?.fabricUnit || ''}
            ></InputNumber>
          </div>
        )
      },
    },
    {
      title: '面料单价',
      dataIndex: 'fabricUnitPrice',
      key: 'fabricUnitPrice',
      align: 'center',
      width: 140,
      hidden: !isRoot,
      render: (_, rows) => {
        return <div className="border_bottom_nolast ant-table-cell-ellipsis">{rows?.fabricUnitPrice || '-'}</div>
      },
    },
    {
      title: '面料总价',
      dataIndex: 'totalPrice',
      key: 'totalPrice',
      align: 'center',
      width: 140,
      hidden: !isRoot,
      render: (_, rows) => {
        return (
          <div className="border_bottom_nolast ant-table-cell-ellipsis">
            {mathjs.format(
              mathjs.multiply(
                mathjs.bignumber(rows?.colorFabricOrderQty || 0),
                mathjs.bignumber(rows?.fabricUnitPrice || 0),
              ),
              {
                notation: 'fixed',
                precision: 2,
              },
            )}
          </div>
        )
      },
    },
    {
      title: '面料备注',
      dataIndex: 'remark',
      key: 'remark',
      align: 'center',
      width: 140,
      render: (_, rows) => {
        return <div className="border_bottom_nolast ant-table-cell-ellipsis">{rows?.remark || '-'}</div>
      },
    },
    {
      title: (
        <div style={{ display: 'flex', alignItems: 'center', gap: 4, justifyContent: 'center' }}>
          面料意向交期
          {
            <Tooltip placement="top" title="一键填充为第一行">
              <ThunderboltOutlined
                style={{ color: 'var(--primary-color)', cursor: 'pointer', marginTop: 2 }}
                onClick={() => {
                  const firstDay = FabricTableData[0]?.intentDate || null
                  FabricTableData?.forEach((bg) => {
                    bg.intentDate = firstDay || null
                  })
                  setFabricTableData([...FabricTableData])
                }}
              />
            </Tooltip>
          }
        </div>
      ),
      dataIndex: 'intentDate',
      key: 'intentDate',
      align: 'center',
      width: 140,
      render: (_, rows) => {
        return (
          <div className="border_bottom_nolast ant-table-cell-ellipsis">
            <DatePicker
              minDate={dayjs()}
              value={rows.intentDate ? dayjs(rows.intentDate) : null}
              onChange={(val) => {
                const day = val ? dayjs(val).format('YYYY-MM-DD') : null
                rows.intentDate = day
                setFabricTableData([...FabricTableData])
              }}
            ></DatePicker>
          </div>
        )
      },
    },
  ]
}
